<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>动画效果</div>
</body>
<style>

    div{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        /* 动画的实现  anim动画名称 5s动画过渡时间 infinite alternate实现回退播放*/
        animation: anim 5s infinite alternate;
        -webkit-animation: anim 5s infinite alternate;
    }

    /* 动画的具体实现过程 */
    @keyframes anim{
        0%{background: red;left:0px;top:0px;}
        25%{background:blue;left:200px;top:0px;}
        50%{background:#ccffcc;left:200px;top: 200px;}
        75%{background:#00ffff;left:0px;top:200px}
        100%{background:red;left:0px;top:0px}
    }
     /* 动画的具体实现过程 兼容webkit浏览器 */
    @-webkit-keyframes anim{
        0%{background: red;left:0px;top:0px;}
        25%{background:blue;left:200px;top:0px;}
        50%{background:#ccffcc;left:200px;top: 200px;}
        75%{background:#00ffff;left:0px;top:200px}
        100%{background:red;left:0px;top:0px}
    }
</style>
</html>